<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .init{
            font-size: 12px;
            color:#cccccc;
        }

        .success{
            color:green;
            font-size: 12px;
        }

        .fail{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>

<!--实现注册用户的用户检测-->
    <form action="registerForm">
        <input type="text" id="username" onblur="checkValue(this)">
        <span id="username_span" class="init">* 请你输入用户名</span>
    </form>

    <script>
        function checkValue(obj) {
            console.log("====1begin=====");

            let username=obj.value;//输入的数据

            //将这个数据发送到后台的servlet
            //1.创建一个XMLHttpRequest对象[ajax最核心的对象]
            //1-1.页面发送数据到后台
            //1-2.后台可以接受到数据
            //1-3.页面可以接受后台响应过来的数据
            //1-4.保证整个数据交互的过程是页面局部刷新，整个页面并没有重新加载


            //固定的编程步骤
            //1.创建对象
            let xmlHttpRequest=new XMLHttpRequest();

            //2.创建一个回调函数
            //什么是回调函数？-可以把一个函数作为参数传入到另外一个函数中
            //回调函数触发的时机？

            //细节 - 此处单独开辟一条新的线程

            //xmlHttpRequest的一个属性readyState的状态属性值的改变有关
            //每个步骤，这个状态值都会进行变化，从0-4，每次改变都会触发这个回调函数
            xmlHttpRequest.onreadystatechange=function () {
                //接收到后台响应的数据之后，该干的事情
                //主要的事情 - 1.接收后台返回的json字符串；2.js操作dom
                //jquery语法中的success:function(data){...}

                //当readyState属性值=4的时候，才代表一次请求，一次响应完成了
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    //获取后台返回过来的json数据
                    let result=xmlHttpRequest.responseText;
                    //此处的result和jquery语法中的data区别就是
                    //result是一个json字符串，jquery中的data就是json对象
                    //console.log(typeof(result))//string

                    //将后台返回过来的json字符串转化成json对象
                    //只有json对象才能拿到json中的属性的

                    //将字符串形式的result的json格式转换成js里面的json对象
                    let result_obj=JSON.parse(result);

                    let span_obj=document.getElementById("username_span");

                    if(result_obj.code=="200"){
                        //js操作dom属性值
                        span_obj.className="success";
                    }else{
                        span_obj.className="fail";
                    }
                    span_obj.innerHTML="* "+result_obj.msg;

                    if(username.length==0){
                        span_obj.className="init";
                        span_obj.innerHTML="* 请你输入用户名";
                    }
                }
            };

            //3.准备请求参数
            xmlHttpRequest.open("get","/prj/ajax/check?uname="+username,true);

            //4.发送请求 - 如果是get请求可以直接使用send(),方法中可以不传入参数
            xmlHttpRequest.send();


            console.log("====3end====");
        }
    </script>
</body>
</html>
